<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed"
         data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">HPIT学院</a>
      </div>
   
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#home">首页</a>
        </li>
        <li>
            <a href="#bbs">论坛</a>
        </li>
        <li>
            <a href="#web">前端开发</a>
        </li>
        <li>
            <a href="#new">最新课程</a>
        </li>
        <li>
            <a href="#app">移动APP</a>
        </li>
        <li>
            <a href="#about">联系我们</a>
        </li>
    </ul>
</div>
</div>
</nav>

<section id="home">
    <div class="lvjing">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 text-center">
                <h1> bootstrap实战课程等你来战！</h1>
                <p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</p>
                <p>培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
                <img class="img img-responsive" src="./img/php.jpg" alt="">
            </div>
        </div>
    </div>
</div>
</section>
<section id="bbs">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <img src="./img/a.png" class="img img-responsive" alt="">
            <h3>Android开发</h3>
            <p>Android开发技术交流、问题求助、实战案例分享
            </p>
            </div>
            <div class="col-md-4">
                <img src="./img/i.png" class="img img-responsive" alt="">
            <h3>IOS开发</h3>
            <p>Android开发技术交流、问题求助、实战案例分享
            </p>
            </div>
            <div class="col-md-4">
                <img src="./img/b.png" class="img img-responsive" alt="">
            <h3>Android开发</h3>
            <p>Android开发技术交流、问题求助、实战案例分享
            </p>
            </div>
        </div>
    </div>
</section>

<section id="web">
<div class="container">
    <div class="row">
        <div class="col-md-6">
         <h1>  HTML5前端开发</h1> 
<p> 一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>

<p> <span class="glyphicon glyphicon-grain"></span> 使用HTML5与CSS3技术轻松实现设备自适应展示。</p>

<p> <span class="glyphicon glyphicon-grain"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>

        </div>
        <div class="col-md-6"><img src="./img/html5.jpg" class="img img-responsive" alt=""></div>
    </div>
</div>


<div class="container">
    <div class="row">
        
        <div class="col-md-6"><img src="./img/Bootstrap.jpg" class="img img-responsive" alt=""></div>
    
        <div class="col-md-6">
            <h1>  HTML5前端开发</h1> 
   <p> 一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
   
   <p> <span class="glyphicon glyphicon-grain"></span> 使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
   
   <p> <span class="glyphicon glyphicon-grain"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
   
           </div>
    </div>
</div>


</section>

<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>